<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <style>
        #media_box{
            display: grid;
        }
    </style>
</head>
<body>
<div id="page_health">
    <div id="navigation_bar">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-submenu index="1">
                <template slot="title">
                    <div class="demo-basic--circle">
                        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                        <div class="block" v-for="size in sizeList" :key="size">
                            <el-avatar :size="size" :src="circleUrl"></el-avatar>
                        </div>
                    </div>
                </template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="2">轻食菜单</el-menu-item>
            <el-menu-item>消息订单</el-menu-item>
            <el-menu-item><el-link href="https://www.ele.me" target="_blank">健康打卡</el-link></el-menu-item>
            <el-menu-item><el-link href="https://www.ele.me" target="_blank">食材溯源</el-link></el-menu-item>
        </el-menu>
    </div>
    <div id="body_health">
        <div id="interaction_box">
            <div id="calorie_item">
            </div>
            <div id="clockIn_item"></div>
        </div>
        <div id="media_box">
            <div id="running-lantern"></div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#page_health",
        data:()=>({

        })
    })
</script>
</body>
</html>